import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlAir extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();
        let cols = ['#f5d76e', '#f7ca18', '#f4d03f', '#ececec', '#ecf0f1', '#a2ded0'];
        for(let i=0;i<180;i++){


            let size=Math.random()*3;
            let color=cols[parseInt(Math.random()*4)];
            let airitem=document.createElement("span");
            airitem.className="air-item";
            airitem.style.width=size+"px";
            airitem.style.height=size+"px";
            airitem.style.top=Math.random()*100+"%";
            airitem.style.left=Math.random()*100+"%";
            airitem.style.background=color;
            airitem.style.boxShadow="0 0 "+Math.random()*10+"px "+ color;
            this.$.airbox.appendChild(airitem);
            console.log(airitem);

        }

        let item;
        setTimeout(()=>{

            item=this.$.airbox.children;
            for(let i=0;i<item.length;i++){
                item[i].style.top=Math.random()*100+"%";
                item[i].style.left=Math.random()*100+"%";

            }

        },1000);

        setInterval(()=>{

            for(let j=0;j<item.length;j++){

                item[j].style.top=Math.random()*100+"%";
                item[j].style.left=Math.random()*100+"%";
            }
        }, 100000);

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
             .owl-air{
             
                width: 100%;
                height: 100%;
                background-color: black;
               
           
             }
             
             .air-item{
             
             
             position: absolute;
             display: block;
             border-radius: 100%;
             transition:all 100s linear;
             
               
             }
             
  
                     
            </style>
        
          <div class="owl-air" id="airbox">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-air",OwlAir);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';



class PublicMethod {

    constructor(){



    }
    static  getColor(type){

        let _color="";
        switch (type) {

            case "default":
                _color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                _color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                _color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                _color="rgba(34,36,40,0.8)";
                break;
            case "light":
                _color="rgba(215,216,218,0.8)";
                break;
            case "success":
                _color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                _color="rgba(255,209,0,0.8)";
                break;
            default:
                _color=type;
                break;
        }
        return _color;
    }

}


class OwlAlert extends PolymerElement {

    constructor(){

        super();
        this._closeEvent=this._close.bind(this);
    }

    ready(){

        super.ready();

        if(this.color!=null){

            let color=PublicMethod.getColor(this.color);
            this.$._item.style.backgroundColor=color;

        }

        if(this.msg!=null){

            this.$._content.innerText=this.msg;
        }
        this.$._item.style.left=window.innerWidth-this.$._item.offsetWidth-20+"px";
        this.$._item.style.top=40+"px";
        this.$._item.style.opacity=1;

    }
    connectedCallback(){


        super.connectedCallback();
        this.$._controller.addEventListener("click",this._closeEvent)

        setTimeout(()=>{

            this.$._item.style.top=-(this.$._item.offsetHeight+20)+'px';
            this.$._item.style.opacity="0";

            setTimeout(()=>{

                this.parentNode.removeChild(this);

            },2000);

        },3000);


    }
    _close(){

        this.$._item.style.top=-(this.$._item.offsetHeight+20)+'px';
        this.$._item.style.opacity=1;

    }
    disconnectedCallback(){
        super.disconnectedCallback();
    }
    static get properties() { return {

        iconType:{

            type:String,
            value:'qq'
        },
        color:{

            type: String,
            value: ""
        },
        msg:{

            type:String,
            value:"hello"
        },
        size:{

            type:String,
        }

    }};


    _moodChange(newValue,oldValue){


    }
    static get template() {
        return html`
             <style>
             
                .owl-alert{
                
                   background-color: yellow;
                   width: 260px;
                   height: 50px;
                   border-radius: 8px;
                   position: absolute;
                   transition: all 0.35s ease-in-out;
                   /*transition: opacity 0.25s ease-in;*/
                   /*opacity: 1;*/
                   opacity: 0;
                   display: flex;
                   box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
                   
                }
                
                .msg{
                  /*background-color: red;*/
                  width: 88%;
                  height: 100%;
                  border-bottom-left-radius: 8px;
                  border-top-left-radius: 8px;
              
                }
                
                .controller{
                
                   /*background-color: aqua;*/
                   width: 12%;
                   height: 100%;
                   border-bottom-right-radius: 8px;
                   border-top-right-radius: 8px;
               
                }
                 .controller img{
                 
                   width: 60%;
                   position: relative;
                   display: inline-block;
                   left: 50%;
                   margin-left: -30%;
                   top: 50%;
                   margin-top: -30%;

                 }
                 
                   .controller img:active{
                   
                   
                      opacity: 0.6;
                   }
                 #_content{

                   position: relative;
                   top: 50%;
                   margin-top: -12px;
                   text-align: center;
                   font-size: 18px;
                   color: white;
                  
                 }
       
            </style>
   
       <div class="owl-alert" id="_item">
          
          <div class="msg">
                <p id="_content"></p>
           </div>
           <div class="controller">
              <img src="./owl-img/close.png" id="_controller">
           </div>
         
       </div>
            
        `;
    }


}

customElements.define("owl-alert",OwlAlert);

import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class  OwlBadge extends  PolymerElement{

    ready(){

        super.ready();

        let colortype= this.color;
        let color="rgba(62,114,255,0.8)";
        switch (colortype) {
            case "default":
                color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                color="rgba(34,36,40,0.8)";
                break;
            case "light":
                color="rgba(215,216,218,0.8)";
                break;
            case "success":
                color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                color="rgba(255,209,0,0.8)";
                break;
            default:
                break;
        }
        this.$.badge.style.backgroundColor=color;
        this.$.badge.innerText=this.count;
    }
    static get properties() { return {

        color:{

            type:String,
            value:'default'
        },
        count:{

            type: String,
            value: "0"
        },
        size:{

            type:String,
            value:'default'

        }
    };
    }


    getValue(){


        return parseInt(this.count);
    }

    setValue(v){

        this.count=v;
        this.$.badge.innerText=v;
    }


    static get template() {

        return html`
          <style> 
   
        .owl-badge{
          
              padding: 4px;
              color: white;
              max-width: 46px;
              border-radius: 12px;
              box-shadow: 0.1px 0.1px 2px rgba(120,120,120,0.6);
              text-align: center;
          }
         
           </style>
        
        <div class="owl-badge" id="badge">
         </div>
       
        `;
    }

}
customElements.define("owl-badge",OwlBadge);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlBallWave extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
         .owl-ball-wave {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: rgb(118, 218, 255);
            border-radius: 50%;
            overflow: hidden;
            
            }
          
             .owl-ball-wave::before,
             .owl-ball-wave::after{
                content: "";
                position: absolute;
                width: 400px;
                height: 400px;
                top: 0;
                left: 50%;
                background-color: rgba(255, 255, 255, .4);
                border-radius: 45%;
                transform: translate(-50%, -70%) rotate(0);
                animation: rotate 6s linear infinite;
                z-index: 10;
            }
             
             .owl-ball-wave::after {
                border-radius: 47%;
                background-color: rgba(255, 255, 255, .9);
                transform: translate(-50%, -70%) rotate(0);
                animation: rotate 10s linear -5s infinite;
                z-index: 20;
            }
        
         
        @keyframes rotate {
            50% {
                transform: translate(-50%, -73%) rotate(180deg);
            } 100% {
                transform: translate(-50%, -70%) rotate(360deg);
            }
        }
                     
            </style>
        <div   
         <div class="owl-ball-wave">
                       
          </div>
        </div>

        `;
    }

    toggle(){


    }

}

customElements.define("owl-ball-wave",OwlBallWave);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlBluringBg extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }

    ready(){

        super.ready();





    }
    static get properties() {

        return {


            bgsrc: {

                type:String,
                value:""
            },
            blur:{

                type:String,
                value:"30px"
            },
            opac:{

                type:String,
                value:"0.8"

            }

        }};



    static get template() {
        return html`
             <style>
             
             .owl-bluring-bg{
             
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: aquamarine;
                background: url("poster/facep.png") center center /cover   no-repeat;
                overflow: hidden;
                z-index: 2;
             }
            
     
       .owl-bluring-bg:before{

            content: '';
            background: inherit;
            -webkit-filter: blur(10px);
            -moz-filter: blur(50px);
            -o-filter: blur(50px);
            -ms-filter: blur(50px);
            filter: blur(50px) brightness(75%);
            position: absolute;
            top: -200px;
            left: -200px;
            right: -200px;
            bottom: -200px;
            z-index: -1;

  }
            </style>
        
          <div class="owl-bluring-bg" id="airbox">
           
          </div>
                    
        
        `;
    }

}

customElements.define("owl-bluring-bg",OwlBluringBg);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlBook extends PolymerElement {


    constructor(){

        super();
        this._clickFun=this.turnPage.bind(this);
        this.pageCount=0;

    }
    connectedCallback(){

        super.connectedCallback();


    }
    ready(){

        super.ready();

        let domlist=this.shadowRoot.querySelector("#_slot").assignedNodes({flatten:false});

        this.pageCount=parseInt(domlist.length/2+domlist.length%2);
        console.log(this.pageCount);
        let count=0;
        for(let i=0;i<domlist.length;i++){

            if(i%2!=0){
                domlist[i].className="page2";
                domlist[i].children[1].style.opacity=0;
                domlist[i].children[1].style.transform="rotateY(180deg)";
                let index= this.pageCount-count ;
                domlist[i].style.zIndex= index;
                domlist[i].addEventListener("click",this._clickFun);
                domlist[i].setAttribute("pindex",index);
                count++;
            }

        }

    }

    turnPage(e){


        let page=e.target.parentNode;
        let flag;
        let status=page.getAttribute("status");
        let currentIndex=page.getAttribute("pindex");
        console.log(currentIndex+"   ccc");
        if(status==undefined||status=="off"){

            flag=true;

        } else {


            flag=false;
        }


        let v=0;
        let change=false;

        if(flag) {
            let timer = setInterval(() => {

                page.style.transform = "rotateY(" + v + "deg)";
                v -= 20;

                if(v<=-90&&!change){

                    console.log(page.children[0])
                    page.children[0].style.opacity=0;
                    page.children[1].style.opacity=1;
                    change=true;

                }

                if (v <= -180) {

                    clearTimeout(timer);
                    let newclass=page.className;
                    newclass+=" shadow";
                    page.classList=newclass;
                    timer = null;
                    page.setAttribute("status","on");

                    page.style.boxShadow="10px 10px 30px rgba(0,0,0,0.5)" ;
                    page.style.zIndex=(this.pageCount-currentIndex);

                    console.log(page.style.zIndex);


                }
            }, 100);
        }else{
            let change=false;
            v=-180
            let timer = setInterval(() => {

                page.style.transform = "rotateY(" + v + "deg)";
                v += 20;

                if(v>=-90&&!change){


                    page.children[1].style.opacity=0;
                    page.children[0].style.opacity=1;
                    change=true;
                }
                if (v >=20) {

                    console.log("CCCCC")
                    clearTimeout(timer);
                    page.setAttribute("status","off");
                    timer = null;
                    page.style.boxShadow="none";

                }
            }, 100);

        }

    }



    static get properties() {

        return {
            mood: {

                type: String,
                value: "",
                observer:"_moodChange"
            },

            bgsrc: {

                type:String,
                value:""
            },
            blur:{

                type:String,
                value:"30px"
            },
            opac:{

                type:String,
                value:"0.8"

            }

        }};



    static get template() {
        return html`
             <style>
             
               .center{

            position: absolute;
            top: 5%;
            left: 50%;
            margin-left: -230px;
            transform: translate(-50%,-50%);
            transform: scale(0.8);
        }

        .page{

                width: 460px;
                height: 660px;
                /*padding: 30px;*/
                background: #fff;
                transform: rotate(-45deg) skewX(8deg) scale(0.8);
                box-shadow: -50px 50px 50px rgba(0,0,0,0.5);
                transform-style: preserve-3d;

        }

        .page:before{

            content: "    鬼刀 ";
            word-wrap: break-word;
            text-anchor: start;
            color: white;
            width: 30px;
            height: 100%;
            background: rgba(5,5,5,1);
            position: absolute;
            top: 2px;
            left: 21px;
            transform: skewY(-45deg) translate(-50px,-36px);


        }


        .page:after{

            content: "";
            width: 98%;
            height: 30px;
            background: #ccc;
            position: absolute;
            bottom: 0px;
            left: 21px;
            transform: skewX(-45deg) translate(-5px,30px);
        }

        .shadow{

            box-shadow: 10px 10px 30px rgba(0,0,0,0.5);
        }
        
        #_slot::slotted(*){
             
             width: 100%;
            height: 100%;
            transform-origin: left;
            transform: perspective(600px);
            transition: all cubic-bezier(0, 0, 0.71, 0.01);
            position: absolute;
            z-index: 10;
            background-color: white;
        
           }
             


     .page2{
     
     
            width: 100%;
            height: 100%;

            transform-origin: left;
            transform: perspective(600px);
            transition: all ease-in;
            position: absolute;
            z-index: 10;
            background-color: white;
     }
     
  

        </style>
        
        
  <div class="center">

    <div class="page" id="page">
       <slot id="_slot"></slot>      
    </div>

</div>
        
        `;
    }

}

customElements.define("owl-book",OwlBook);




import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlBookPage extends PolymerElement {

    constructor(){
        super();

    }
    connectedCallback(){

        super.connectedCallback();
    }

    static get properties() { return {



    }};

    static get template() {
        return html`


        <style>
        
        .owl-book-page{
     
        
        }

        </style>
           
          <div class="owl-book-page">
          <div>
             <slot></slot>
         </div>     
          </div>

        `;
    }
}

customElements.define("owl-book-page",OwlBookPage);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';



class  OwlButton extends  PolymerElement{
    constructor(){

        super();
    }

    ready(){

        super.ready();
        this.addEventListener('click',this.toggle);
        let colortype= this.color;
        let color="rgba(62,114,255,0.8)";
        switch (colortype) {
            case "default":
                color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                color="rgba(34,36,40,0.8)";
                break;
            case "light":
                color="rgba(215,216,218,0.8)";
                break;
            case "success":
                color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                color="rgba(255,209,0,0.8)";
                break;
            default:
                break;
        }

        this.$.btn.style.backgroundColor=color;

        let size=this.size;
        let btnw="";
        let btnh=0;
        let fontsize=0;

        switch (size) {

            case "default":
                btnw="80px";
                btnh=36;
                fontsize=16;
                break;
            case "large":
                btnw="110px";
                btnh=48;
                fontsize=24;
                break;
            case "small":
                btnw="60px";
                btnh=28;
                fontsize=12;
                break;
            default:
                break;
        }
        this.$.btn.style.width=btnw;
        this.$.btn.style.height=btnh+"px";
        this.$.txt.style.fontSize=fontsize+"px";
        this.$.txt.style.marginTop=-(this.$.txt.offsetHeight/2)+"px";


    }
    static get properties() { return {
        mood: {

            type: String,
            value: "ABC"

        },
        color:{

            type:String,
            value:'default'

        },

        size:{

            type:String,
            value:'default'

        }
    }};

    static get template() {

        return html`
          <style> 
    
        
        .owl-btn{
          
              width: 80px;
              height:40px;
              margin: 4px;
              color: white;
              border-radius: 6px;
              box-shadow: 0.1px 0.1px 2px rgba(120,120,120,0.6);
          }
          
          .owl-btn:active{
           
               opacity: 0.6;
          }
          
          .owl-btn p{
          
             width: 100%;
             text-align: center;
             font-size: 16px;
             margin: 0px;
             padding: 0px;
             position: relative;
             display:inline-block;
             top: 50%;
          }
           </style>
        
        <div class="owl-btn" id="btn">
             <p id="txt"><slot></slot></p>
         </div>
       
        `;
    }

}

customElements.define("owl-button",OwlButton);




import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlCard extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();


    }
    static get properties() { return {


    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
           .owl-card{
           
               max-width: 100%;
               width: calc(100% - 30px);
               margin-left: 15px;
               height: auto;
               margin-top: 12px;
               background-color: white;
               box-shadow: 0.2px 0.2px 6px 0.2px rgba(120,120,120,0.6);
               padding-top: 8px;
               padding-bottom: 4px;
               border-radius: 4px;
               margin-bottom: 8px;
           }
          
            </style>
        
         <div class="owl-card">
             
           <slot></slot>
       
         </div>
        `;
    }

    toggle(){


    }

}

customElements.define("owl-card",OwlCard);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlCardContent extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();


    }
    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this.toggle);

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
           .owl-card-content{
           
               width: calc(100% - 24px);
               padding-bottom: 4px;
               padding-top: 4px;    
               background-color: white;
               padding-left: 12px;
               padding-right: 12px;
               
           }
           #content::slotted(*){
           
             width: 100%;
             height: auto;
           
           }
           
            </style>
        
         <div class="owl-card-content">
                <slot id="content"></slot>
         </div>
        `;
    }

    toggle(){


    }

}

customElements.define("owl-card-content",OwlCardContent);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlCardFooter extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this.toggle);

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
           .owl-card-footer{
           
               width: calc(100% - 24px);
               height: auto;          
               background-color: white;
               padding-left: 12px;
               padding-right: 12px;
               padding-bottom: 12px;
             
           }
           
            </style>
        
         <div class="owl-card-footer">
               <slot></slot>
         </div>
        `;
    }

    toggle(){


    }

}

customElements.define("owl-card-footer",OwlCardFooter);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlCardHeader extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this.toggle);

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
           .owl-card-header{
           
               width: calc(100% - 24px);
               padding-left: 12px;
               padding-right: 12px;
               padding-top: 8px;
               padding-bottom: 8px;
               height: auto;          
               background-color: white;
           }
           
            </style>
        
         <div class="owl-card-header">
           <slot></slot>
         </div>
        `;
    }

    toggle(){


    }

}

customElements.define("owl-card-header",OwlCardHeader);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlExpandingMenu extends PolymerElement {

    constructor(){
        super();
        this._toggleEvent=this._toggleExpanding.bind(this);
        this._flag=false;

    }
    connectedCallback(){
        super.connectedCallback();
        this.$._item_child.addEventListener("click",this._toggleEvent);

    }
    _toggleExpanding(){


        let domlist=this.shadowRoot.querySelector("#_slot").assignedNodes({flatten:false});

        if(this._flag){


            for(let i=1;i<domlist.length;i+=2){

                let target=domlist[i].shadowRoot.querySelector("#_item");
                target.style.marginTop="-15px";


            }
            this.$._icon.style.transform='rotate(0deg)';

        }else{

            for(let i=1;i<domlist.length;i+=2){

                let target=domlist[i].shadowRoot.querySelector("#_item");
                target.style.marginTop=-((i-1)*18+60)+'px';

            }

            this.$._icon.style.transform='rotate(-45deg)';
        }

        this._flag=!this._flag;
    }

    ready(){

        super.ready();
        let targetHeight=this.parentNode.offsetHeight;
        console.log("now"+targetHeight+'px');
        let targetWidth=this.parentNode.offsetWidth;
        this.$._item.style.marginTop=(targetHeight-this.$._item.offsetHeight-8)+'px';
        this.$._item.style.marginLeft=(targetWidth-this.$._item.offsetWidth-8)+'px';


        console.log();
    }

    static get properties() { return {
        mood: {

            type: String,
            value: "ABC"
        }
    }};


    static get template() {
        return html`


        <style>
        
        .owl-expanding-menu{
            
             width: 40px;
             height: 40px;
             background-color: white;
             border-radius: 50%;
             position: absolute;
             z-index: 100;
             box-shadow: 0.2px 0.2px 4px 0.6px rgba(120,120,120,0.6);
           
        }
        
        .owl-expanding-menu-child{
            
            width: 38px;
            height: 38px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -19px;
            top: 50%;
            margin-top: -19px;
        }
         .owl-expanding-menu-child img{
            width: 20px;
            height: 20px;
            position: relative;
            left: 50%;
            margin-left: -10px;
            top: 50%;
            margin-top: -10px;
            transition:  all 0.2s ease-in-out;
            
        }
          #_slot::slotted(*){
              
          }

        </style>
          
             <div id="_item" class="owl-expanding-menu">
                  <!--<div class="owl-expanding-menu-child" id="_item_child2" style="background-color: black">-->
                       <slot id="_slot"></slot>
              
                  <div class="owl-expanding-menu-child" id="_item_child">
                     <img src="./owl-img/add.png" id="_icon">
                  </div>  
            </div>
       
        `;
    }
}

customElements.define("owl-expanding-menu",OwlExpandingMenu);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlExpandingMenuItem extends PolymerElement {

    constructor(){
        super();
    }
    connectedCallback(){
        super.connectedCallback();


    }


    ready(){

        super.ready();

    }

    static get properties() { return {
        mood: {

            type: String,
            value: "ABC"
        }
    }};


    static get template() {
        return html`


        <style>
        
        .owl-expanding-menu-item{
            
             width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -15px;
            top: 50%;
            margin-top: -15px;
            transition: margin-top 0.2s cubic-bezier(.94,-0.25,.32,1.31);
            box-shadow: 0.2px 0.2px 4px 0.6px rgba(120,120,120,0.6);
           
        }
       
        </style>
          
             <div id="_item" class="owl-expanding-menu-item">
                <slot></slot>
            </div>
       
        `;
    }
}

customElements.define("owl-expanding-menu-item",OwlExpandingMenuItem);

import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlIcon extends PolymerElement {


    constructor(){

        super();

    }

    ready(){

        super.ready();
        this.$.imgStart.src=this.normalsrc;

    }

    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this._toggleStart);

    }
    static get properties() { return {

        normalsrc:{

            type:String,
            value:""
        },
        activesrc:{

            type: String,
            value: ""
        },
        checked:{

            type:String,
            value:"false"
        }
    }};



    _toggleStart(){

        if(this.checked=="false"){

            this.$.imgStart.src=this.activesrc;
        }else{

            this.$.imgStart.src=this.normalsrc;
        }

        this.checked=this.checked=="false"? "true":"false";
    }


    getChecked(){

        return this.checked=="false"? false:true;
    }

    setChecked(v){

        if(v){
            this.$.imgStart.src=this.activesrc;
        }else{
            this.$.imgStart.src=this.normalsrc;
        }
        this.checked=v.toString();
    }

    static get template() {
        return html`
             <style>
             
              .owl-start{
                
                  width: 40px;
                  height: 40px;
              }
              
              .owl-start img{
              
                  width: 100%;
                  height: 100%;
              }
             
            </style>
        
                <div class="owl-start">
                   <img id="imgStart" src="../star.png">
                </div>
        `;
    }


}

customElements.define("owl-icon",OwlIcon);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlInput extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();
        if(this.imgsrc=='owl-img/input/user1.png'||this.imgsrc==null){


        }else{

            this.$.imgInputsrc.src=this.imgsrc;

        }
    }
    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this.toggle);

    }
    static get properties() { return {

        imgsrc:{

            type:String,
            value:'owl-img/input/user1.png'
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
           .owl-input{
           
              width: auto;
              height: 40px;
              /*background-color: yellow;*/
              padding-left: 12px;
              padding-right: 12px;
              margin-left: 100px;
              display: flex;
              margin-bottom: 120px;
              /*background-color: gold;*/
           }
           
           .imgtype{
           
             width: 30px;
             height: 30px;
             /*background-color: yellow;*/
             margin-right: 12px;
           }
           
           .imgtype img{
           
              width: 30px;
              height: 30px;
              margin-top: 4px;
            
           }
           
           
           #input::slotted(input){
           
              /*background-color: rgba(120,120,120,0.2);*/
              padding-left: 8px!important;
              width: 200px;
          
              height: 40px;
              /*border-radius: 4px;*/
              /*font-size: 1.4rem;*/
              
              font-size:1.4em;
           
              border-radius:8px;
              border:1px solid #c8cccf;
              /*color:#6a6f77;*/
              outline:none;
           
           }
           
          
           
            </style>
        
         <div class="owl-input">
         <div  class="imgtype" >
             <img src="owl-img/input/user1.png" id="imgInputsrc">
         </div>
            <slot id="input"></slot>
            
         </div>
        `;
    }

    toggle(){


    }

}

customElements.define("owl-input",OwlInput);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlMeteor extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

        let meteor=this.$.meteor;

        for(let i=0;i<50;i++){

            let newMeteor=document.createElement("div");
            newMeteor.className="star";
            newMeteor.style.top=this.randDistance(30,-30)+"px";
            newMeteor.style.left=this.randDistance(150,20)+"px";
            meteor.appendChild(newMeteor);
        }

        let meteorItem=this.$.meteor.children;
        for(let j=0,len=meteorItem.length;j<len;j++){

            if(j%6==0){

                meteorItem[j].style.animationDelay='0s';
            }else{

                meteorItem[j].style.animationDelay=j*0.8+'s';
            }
        }

    }


    randDistance(max,min){



        let distance=Math.floor(Math.random()*(max-min-1)*10+min);
        return distance;

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
                .owl-meteor{
                
                   width: 100%;
                   height: 100%;
                   background-color: black;
                   position: absolute;
                   overflow: hidden;
                }
        .star {
            display: block;
            width: 1px;
            background: transparent;
            position: relative;
            opacity: 0;
            /*过渡动画*/
            
            animation: star-fall 3s linear infinite;
            -webkit-animation: star-fall 3s linear infinite;
            -moz-animation: star-fall 3s linear infinite;
        }
        .star:after {
            content: '';
            display: block;
            border: 0px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .5);
            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            /*变形*/
            
            transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            transform-origin: 0% 100%;
            -webkit-transform-origin: 0% 100%;
            -moz-transform-origin: 0% 100%;
        }
        @keyframes star-fall {
            0% {
                opacity: 0;
                transform: scale(0.5) translate3d(0, 0, 0);
                -webkit-transform: scale(0.5) translate3d(0, 0, 0);
                -moz-transform: scale(0.5) translate3d(0, 0, 0);
            }
            50% {
                opacity: 1;
                transform: translate3d(-200px, 200px, 0);
                -webkit-transform: translate3d(-200px, 200px, 0);
                -moz-transform: translate3d(-200px, 200px, 0);
            }
            100% {
                opacity: 0;
                transform: scale(1.2) translate3d(-300px, 300px, 0);
                -webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
                -moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
            }
        }
         
                     
            </style>
        
          <div class="owl-meteor" id="meteor">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-meteor",OwlMeteor);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlMusic extends PolymerElement {

    constructor(){

        super();
        this.step=0.0;
        this.durationtime=0.0;
        this._isplay=false;
        this._isdown=false;
        this.readyoffset=0;
        this.targetWidth=0;
        this.conWidth=0;
        this.currentOffsetLeft=0;
        this.value=0.0;
        this.downX=0;
        this.ctrlBall=null;
        this.progBar=null;
        this._playEvent=this._play.bind(this);
        this._downEvent=this._conDown.bind(this);
        this._upEvent=this._conUp.bind(this);
        this._moveEvent=this._conMove.bind(this);
        this._outEvent=this._conOut.bind(this);
        this._timeUpdate=this.starPlaying.bind(this);
    }

    connectedCallback(){

        super.connectedCallback();
        this.$._play.addEventListener("click",this._playEvent);
        this.$.conball.addEventListener("mousedown",this._downEvent);
        this.$.conball.addEventListener("touchstart",this._downEvent);
        let alltime=this.$._audio.duration;
        setTimeout(()=>{
            this.durationtime=this.$._audio.duration;
            this.step=this.targetWidth/this.durationtime;
            let dur =(this.durationtime/60).toFixed(2);
            let list=dur.toString().split(".");
            let number1="0";
            if(list[0].length<2){
                number1+=list[0];
            }
            this.$.timer.innerText=number1+":"+list[1];

        },1000);
    }

    disconnectedCallback(){
        super.disconnectedCallback();

        this.$._play.removeEventListener("click",this._playEvent);
        this.$.conball.removeEventListener("mousedown",this._downEvent);
        this.$._item.removeEventListener("mousemove",this._moveEvent);
        this.$._item.removeEventListener("mouseup",this._upEvent);
        this.$._item.removeEventListener("mouseleave",this._outEvent);
        this.$._audio.removeEventListener("timeupdate",this._timeUpdate);
    }

    ready(){

        super.ready();
        this.$._poster.src=this.imgsrc;
        this.readyoffset=this.$.conball.offsetLeft;
        this.targetWidth=this.$.timel.clientWidth;
        this.conWidth=this.$.conball.clientWidth;
        this.ctrlBall=this.$.conball;
        this.progBar=this.$.prog;

        this.progBar.style.backgroundColor=this.progcolor;

        this.$.audioText.style.color=this.titlecolor;
        if(this.imgsrc!=""){

            this.$._poster.src=this.imgsrc;
        }

        if(this.audiosrc!="") {

            this.$._audio.src = this.audiosrc;
        }

        if(this.audiotitle!=""){

            this.$.audioText.innerText=this.audiotitle;
        }else if(this.audiosrc!=""){

            this.$.audioText.innerText=this._getDefaultName(this.audiosrc);
        }
    }

    static get properties() { return {

        imgsrc:{

            type:String,
            value:"",
        },
        audiosrc:{

            type:String,
            value:""
        },
        audiotitle:{

            type:String,
            value:""
        },
        loop:{

            type:String,
            value:"false"
        },
        progcolor:{

            type:String,
            value:"rgba(255,0,0,1)"
        },
        titlecolor:{

            type:String,
            value:"rgba(255,0,0,1)"
        }
    }};


    _conMove(e) {

        if (this._isdown) {

            let target = this.$.conball;
            let offset = e.clientX - this.downX;
            let targetoffset = this.currentOffsetLeft;
            //向左移动

            if (offset < 0) {

                if ((-offset) <= (this.downX-this.readyoffset+this.conWidth/2)) {

                    this.value= (this.downX-this.readyoffset) + offset;
                    target.style.marginLeft =this.value+ "px";
                    this._setStatusBar(this.value);
                }

            } else {

                if (offset <= (this.readyoffset + this.targetWidth - this.downX) -this.conWidth/2 ) {

                    this.value=(this.downX-this.readyoffset) +offset;
                    target.style.marginLeft = this.value+"px";
                    this._setStatusBar(this.value);
                }

            }
        }
    }


    _conDown(e){

        this._isdown=true;
        this.downX=e.clientX;
        this.currentOffsetLeft=this.$.conball.offsetLeft-this.readyoffset;
        this.$._item.addEventListener("mousemove",this._moveEvent,false);
        this.$._item.addEventListener("mouseup",this._upEvent,false);
        this.$._item.addEventListener("mouseleave",this._outEvent,false);

        this.$._item.addEventListener("touchmove",this._moveEvent,false);
        this.$._item.addEventListener("touchend",this._upEvent,false);

    }

    _conOut(){

        this._isdown=false;
    }
    _conUp(){
        this._isdown=false;
        let temper=(this.value/this.targetWidth)*((this.durationtime));
        // let temper=this.value*this.step;
        console.log("the all time ="+this.durationtime);
        console.log("the value ="+this.value);
        console.log("the current time = "+temper);
        this.$._audio.currentTime=temper.toFixed(4);

    }

    _play(){

        if(this._isplay){

            this.$._play.src="./owl-img/play.png"
            this.$._audio.pause();
            this.$._audio.removeEventListener("timeupdate",this._timeUpdate);

        }else{

            this.$._play.src="./owl-img/pause.png"
            this.$._audio.play();
            this.$._audio.addEventListener("timeupdate",this._timeUpdate);
        }
        this._isplay=!this._isplay;
    }

    _setLineLineAudio(){

        let pos=this.$._audio.currentTime;
        let nextpos=pos*this.step;
        this._setStatusBar(nextpos);
        this._setControllBalFollowing(nextpos);
    }

    _setControllBalFollowing(value){

        this.ctrlBall.style.marginLeft=-5+value+"px";
    }
    _setTimeTextFollowing(value){


    }

    _getDefaultName(filename){

        let item=filename.split('/');
        return item[item.length-1].split(".")[0];
    }

    starPlaying(){

        this._setLineLineAudio();
    }


    _setStatusBar(value){

        this.progBar.style.width=value+"px";
    }


    static get template() {
        return html`
             <style>
             
            .owl-music{
            
               width: calc(100% - 24px);
               margin-top: 12px;
               margin-left: 12px;
               height: 100px;
               background-color: white;
               box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,120,120,0.4);
               display: flex;
               background-color: white;
            
            }
            .owl-music-poster{
            
               width: 28%;
               height: 100%;
               /*background-color: aquamarine;*/
            
            }
            .owl-music-poster .poster{
                
                width: 100%;
                height: 100%;
         
            }
            
             .owl-music-poster .controller{
             
                width: 50px;
                height: 50px;
                position: relative;
                left: 50%;
                outline: none;
                margin-top: -25px;
                top: -50%;
                margin-left: -25px;
                /*background-color: yellow;*/
                cursor: pointer;
          
             
             }
            .owl-music-controller{
            
               width: 78%;
               height: 100%;
               /*background-color: bisque;*/
               
      
            }
            .owl-music-title{
            
               width: 100%;
               height: 40%;
               /*background-color: yellow;*/
               margin-top: 5%;
            
            }
            
            .owl-music-timeline{
               width: 100%;
               height: 40%;
               /*background-color: aqua;*/
            }
            .owl-music-timeline .timeline{
            
               width: 70%;
               margin-left: 12px;
               height: 2px;
               background-color: rgba(120,120,120,0.5);
               display: inline-block;
               margin-top: 8px;
             
            }
               .owl-music-timeline .timeinfo{
               
                 width: 20%;
                 height: 20px;
                 /*background-color: yellow;*/
                 font-size: 0.6rem;
                 color: rgba(120,120,120,0.8);
                 padding-left: 8px;
               
               }
               .timeline .timeline-ball{
               
                 width: 10px;
                 height: 10px;
                 background-color: rgba(255,255,255,1);
                 box-shadow: 0.1px 0.1px 0.2px 2px rgba(120,120,120,0.5);
                 margin-top: -4px;
                 border-radius: 50%;
                 cursor: pointer;
                 margin-left: -5px;
                 position:relative ;
               
               }
               .timeline .prog{
                 width: 0px;
                 height: 100%;
                 background-color: red;
                 margin-top: -6px;
                 
               
               }
             
            </style>
        
          
           <div class="owl-music" id="_item">
               <audio src="" id="_audio"  loop="false" hidden="false"></audio>
               <!--<owl-music ></owl-music>-->
             <div class="owl-music-poster">
                <img class="poster" src="../star.png" id="_poster">
                <img  class="controller" src="./owl-img/play.png" id="_play">
             </div>
             
             <div class="owl-music-controller">
                <div class="owl-music-title">
                
                 <p style="padding-left: 12px;font-size: 0.8rem;color: #f573a0" id="audioText">蝶々結び--Aimer</p>
                </div>
                <div class="owl-music-timeline">
                <div style="width: 100%;display: flex">
                   <div class="timeline" id="timel">
             
                       <div class="timeline-ball" id="conball"></div>
                             <div class="prog" id="prog"></div>
                       
                    </div>
                   <div class="timeinfo" id="timer">00:00</div>
                 </div>
                   
                 </div>
             </div>
           </div>
        
        `;
    }

}
customElements.define("owl-music",OwlMusic);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';



class PublicMethod {

    constructor(){



    }
    static  getColor(type){

        let _color="";
        switch (type) {

            case "default":
                _color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                _color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                _color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                _color="rgba(34,36,40,0.8)";
                break;
            case "light":
                _color="rgba(215,216,218,0.8)";
                break;
            case "success":
                _color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                _color="rgba(255,209,0,0.8)";
                break;
            default:
                _color=type;
                break;
        }
        return _color;
    }



}


class OwlNotification extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();
        let parentNode=this.parentNode;

        switch (this.position) {

            case "left":
                this.$._item.style.marginLeft=-(this.$._item.offsetWidth+20)+"px";
                this._changeAngle("left");
                break;
            case "right":
                this.$._item.style.marginLeft=parentNode.offsetWidth+20+'px';
                this.$._item.style.marginTop=-(this.$._item.offsetHeight/2-parentNode.offsetHeight/2)+'px';
                break;
            case "up":
                break;
            case "down":
                break;
            default:
                break;
        }

    }
    connectedCallback(){


        super.connectedCallback();


    }

    _changeAngle(position){




    }

    disconnectedCallback(){
        super.disconnectedCallback();


    }
    static get properties() { return {

        iconType:{

            type:String,
            value:'qq'
        },
        position:{

            type:String,
            value:"right"

        }

    }};


    _moodChange(newValue,oldValue){


    }


    static get template() {
        return html`
             <style>
             
             .owl-notic{
              width: 120px;
              height: 60px;
              background: white;
              position: absolute;
              border-radius: 8px;
              box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
              
             }
             .owl-notic:before {
                content: "";
                width: 0;
                box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
                height: 0;
                right: 100%;
                
                top: 20px;
                position: absolute;
                border-top: 12px solid transparent;
                border-right: 12px solid white;
                border-bottom: 13px solid transparent;
               
             }  
             
             
             /*.owl-notic-left{*/
             
              /*width: 140px;*/
              /*height: 180px;*/
              /*background: white;*/
              /*position: absolute;*/
              /*border-radius: 8px;*/
               /*box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);*/
              /**/
             /*}*/
             /*.owl-notic-left:before {*/
                /*content: "";*/
                /*width: 0;*/
                /*box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);*/
                /*height: 0;*/
                /*left: 100%;*/
                /*transform: rotate(180deg);*/
                /*top: 50%;*/
                /*margin-top: -6px;*/
                /*position: absolute;*/
                /*border-top: 12px solid transparent;*/
                /*border-right: 12px solid white;*/
                /*border-bottom: 13px solid transparent;*/
               /**/
             /*}                              */
        
            </style>
   
       <div class="owl-notic" id="_item">
          <slot></slot>
       </div>
            
        `;
    }


}

customElements.define("owl-notic",OwlNotification);






import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';



class OwlPinterestItem extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }
    static get properties() { return {
        mood: {

            type: String,
            value: ""
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};

    static get template() {
        return html`
             <style>
             
             .owl-p-item{
                
                  width: 25%;
                  height: 300px;
                  position: absolute;
                  background-color: yellow;
              }
            </style>
            
            
        <div class="owl-p-item">
           <div class="content">
              <slot></slot>
           </div>
        </div>
        `;
    }
}

customElements.define("owl-pinterest-item",OwlPinterestItem);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlPinterestLayout extends PolymerElement {

    constructor(){

        super();
        this.targetHeightList=[];
        this.offsetwidth=0;

    }
    connectedCallback(){
        super.connectedCallback();

    }

    ready(){

        super.ready();
        this.$.layout.style.width=this.laoutwidth;
        this.initLayout();

    }
    initLayout(){

        let colCount=parseInt(this.col);
        this.offsetwidth=100/colCount;
        let domlist=this.shadowRoot.querySelector("#_slot").assignedNodes({flatten:false});
        let currentDom=[];
        for(let i=1;i<=domlist.length-1;i+=2){
            domlist[i].style.opacity="0";
            currentDom.push(domlist[i]);
        }



        for(let z=0;z<currentDom.length;z++){

            currentDom[z].style.width=this.offsetwidth+"%";
            currentDom[z].style.position="absolute";
            currentDom[z].style.transition="all  0.2s ease-in"

            if(z<colCount) {
                currentDom[z].style.left = z * this.offsetwidth + "%";
                currentDom[z].style.opacity="1";
                this.targetHeightList.push({

                    h: currentDom[z].offsetHeight,
                    w: z * this.offsetwidth
                });
            }
        }

        for(let c=colCount;c<currentDom.length;c++){

            let rankList=this.targetHeightList.sort((a,b)=>{ return a.h-b.h });
            let min=rankList[0];
            currentDom[c].style.top=min.h+"px";
            currentDom[c].style.left=min.w+"%";
            currentDom[c].style.opacity="1";
            rankList[0].h+=currentDom[c].offsetHeight;
            this.targetHeightList=rankList;
        }



    }
    getCurrentHeight(){

        return this.targetHeightList.sort((a,b)=>{

            return a.h-b.h;
        })[0];
    }

    addItem(items){

        console.log("OOOOO")

        for(let i=0;i<items.length;i++){

            let dom= document.getElementById(this.layoutid);
            console.log(this.layoutid);
            console.log(dom);
            if(dom){
                dom.appendChild(items[i]);
            }else{

                console.log("layoutis is null");
            }
            items[i].style.width=this.offsetwidth+"%";
            items[i].style.position="absolute";
            let rankList=this.targetHeightList.sort((a,b)=>{ return a.h-b.h });
            let min=rankList[0];
            items[i].style.top=min.h+"px";
            items[i].style.left=min.w+"%";
            items[i].style.opacity="1";
            rankList[0].h+=items[i].offsetHeight;
            this.targetHeightList=rankList;
        }
    }
    static get properties() { return {
        laoutwidth: {

            type: String,
            value: "80%"

        },
        col:{

            type:String,
            value:"4"
        },
        layoutid:{

            type:String,
            value:"default"

        }

    }};

    static get template() {
        return html`
             <style>
             
             .owl-p-layout{
                
                  width: 80%;
                  margin-left: 10%;
                  height: auto;
                  position: absolute;
                  background-color: #9e9e9e;
              }
            </style>

        <div class="owl-p-layout" id="layout">
           <slot id="_slot"></slot>
        </div>
  
        `;
    }


}

customElements.define("owl-pinterest-layout",OwlPinterestLayout);



import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlRange extends PolymerElement {



    constructor(){

        super();
        this.rangeDown=this._dropRange.bind(this);
        this.rangeUp=this._rangeUp.bind(this);
        this.rangeMove=this._rangeMove.bind(this);
        this.rangeOut=this._rangeOut.bind(this);
        this.isdown=false;
        this.currentValue=0;
    }

    ready(){

        super.ready();
        let rangeValue=this.value;
        let persentOfrange=(this.$.range.offsetWidth/100*rangeValue-this.$.controller.offsetWidth/2)+'px';
        this.$.controller.style.left=persentOfrange;
        this.$.effect.style.width=persentOfrange;
        this.$.effect.style.backgroundColor=this._getColor(this.color);

    }

    connectedCallback(){

        super.connectedCallback();
        this.$.controller.addEventListener("mousedown",this.rangeDown,false);

    }

    disconnectedCallback(){

        super.disconnectedCallback();
        this.$.controller.removeEventListener("mousemove",this.rangeMove);
        this.$.controller.removeEventListener("mousedown",this.rangeDown);
        this.$.controller.removeEventListener("mouseout",this.rangeOut);
        this.$.controller.removeEventListener("mouseup",this.rangeUp);
    }

    _dropRange(e){

        this.isdown=true;
        this.$.controller.addEventListener("mousemove",this.rangeMove,false);
        this.$.controller.addEventListener("mouseup",this.rangeUp,false);
        this.$.controller.addEventListener("mouseout",this.rangeOut,false);
    }


    _rangeMove(e){

        if(this.isdown) {
            let target = this.$.controller;
            let bgtarget = this.$.effect;
            let left = e.clientX - this.$.range.offsetLeft - target.offsetWidth/2;

            if (left >= this.$.range.offsetWidth - target.offsetWidth/2) {

                target.style.left = this.$.range.offsetWidth - target.offsetWidth / 2 + 'px';
                bgtarget.style.width = this.$.range.offsetWidth - target.offsetWidth / 2 + 'px';

            } else if (left <=  -(this.$.range.offsetLeft)) {


                target.style.left = left + 'px';
                bgtarget.style.width = left + 'px';
            } else {
                target.style.left = left + 'px';
                bgtarget.style.width = left + 'px';

            }

        }
    }

    _rangeUp(e){

        this.isdown=false;
        this.removeEventListener("mousemove",this.rangeDown);
        this.removeEventListener("mousedown",this.rangeMove);

    }
    _rangeOut(e){

        this.isdown=false;
    }


    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        },
        value:{

            type:Number,
            value:0
        },
        color:{

            type:String,
            value:"default"
        }

    }};

    _getColor(colorType){

        let color="";
        switch (colorType) {
            case "default":
                color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                color="rgba(34,36,40,0.8)";
                break;
            case "light":
                color="rgba(215,216,218,0.8)";
                break;
            case "success":
                color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                color="rgba(255,209,0,0.8)";
                break;
            default:
                break;
        }

        return color;

    }


    _moodChange(newValue,oldValue){



    }

    getValue(){

        return  Math.floor(((this.$.effect.offsetWidth+this.$.controller.offsetWidth/2)/this.$.range.offsetWidth)*100);
    }

    setValue(){


    }

    static get template() {
        return html`
             <style>
            
             
              .owl-range{
                
                  color: red;
                  background-color: rgba(120,120,120,0.6);
                  width: 160px;
                  height: 2px;
                  position: absolute;
                  margin-bottom: 8px;
                  margin-top: 18px;
                  
                
              }
              .owl-range .range-contrl{
                
                width: 30px;
                display: block;
                height: 30px;
                background-color: rgba(255,255,255,1);
                position: relative;
                top: -15px;
                border-radius: 50%;
                /*margin-left: 0px;*/
                box-shadow: 0px 1.2px 0.2px 0.6px rgba(120,120,120,0.6);
                z-index: 10;
                margin-left: -15px;
              }
              .owl-range .range-contrl:active{
              
                 opacity: 1;
              }
              .owl-range .range-effect{
                
                width: 0%;
                height: 100%;
                position: relative;
                top: -30px;
                z-index: 3;
              
              }
              
              .inner{
              
                width: 18px;
                height: 18px;
                border-radius: 50%;
                display: inline-block;
                background-color: yellowgreen;
                position: relative;
                left: 50%;
                margin-left: -9px;
                top: 50%;
                margin-top: -9px;
              
              }
            
            </style>
            
  
  
  <div style="height: 40px;padding-left: 20px;width: 160px">
        <div class="owl-range" id="range">
             <div id="controller" class="range-contrl">
              <div class="inner"></div>
             </div>
             <div id="effect" class="range-effect"></div>
        </div>
    </div>
        `;
    }
}

customElements.define("owl-range",OwlRange);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class owlSwitch extends PolymerElement {


    constructor(){

        super();
        this.flag=false;
        this._valueChangeEvent=null;
    }

    ready(){

        super.ready();

        if(this.checked=="true"){

            this.$.owlcon.style.marginLeft="27px";
            let colortype= this.color;
            let color="";
            switch (colortype) {
                case "default":
                    color="rgba(62,114,255,0.8)";
                    break;
                case "secondary":
                    color="rgba(0,214,236,0.8)";
                    break;
                case "danger":
                    color="rgba(255,0,43,0.8)";
                    break;
                case "dark":
                    color="rgba(34,36,40,0.8)";
                    break;
                case "light":
                    color="rgba(215,216,218,0.8)";
                    break;
                case "success":
                    color="rgba(0,234,97,0.8)";
                    break;
                case "warning":
                    color="rgba(255,209,0,0.8)";
                    break;
                default:
                    color=colortype;
                    break;
            }
            this.$.switchbg.style.backgroundColor=color;
            this.flag=true;
        }


    }
    connectedCallback(){

        super.connectedCallback();
    }
    static get properties() { return {

        checked:{

            type:String,
            value:"false",
            notify:true,
            reflectToAttribute:true
        },
        color:{

            type:String,
            value:"default"
        },

    }};


    toggle(e){

        if(!this.flag){

            this.$.owlcon.style.marginLeft="27px";
            let colortype= this.color;
            let color="";
            switch (colortype) {
                case "default":
                    color="rgba(62,114,255,0.8)";
                    break;
                case "secondary":
                    color="rgba(0,214,236,0.8)";
                    break;
                case "danger":
                    color="rgba(255,0,43,0.8)";
                    break;
                case "dark":
                    color="rgba(34,36,40,0.8)";
                    break;
                case "light":
                    color="rgba(215,216,218,0.8)";
                    break;
                case "success":
                    color="rgba(0,234,97,0.8)";
                    break;
                case "warning":
                    color="rgba(255,209,0,0.8)";
                    break;
                default:
                    color=colortype;
                    break;
            }
            this.$.switchbg.style.backgroundColor=color;

        }else{

            this.$.owlcon.style.marginLeft="0px";
            this.$.switchbg.style.backgroundColor="rgba(255,255,255,1)";

        }
        if(this._valueChangeEvent!=null){
            this._valueChangeEvent();
        }
        this.flag=!this.flag;

    }


    getValue(){

        return this.flag;
    }

    setValueChangeEvent(fun){

        this._valueChangeEvent=fun;

    }

    setValue(flag){

        this.toggle(this);
    }

    static get template() {
        return html`
             <style>
       
              .owl-switch{
                
                width: 68px;
                height: 40px;
                background-color: rgba(120,120,120,0.4);
                border-radius: 20px;
                position: static;
                margin: 4px;
                
                  
              }
              
              .owl-switch .switch-bg{
               
                width: 64px;
                height: 37px;
                background-color: rgba(120,120,120,0.4);
                position: absolute;
                margin-top: 1.5px;
                border-radius: 20px;
                background-color: white;
                margin-left: 2px;
              }

             .owl-switch .switch-contrl{
                 
                 width: 37px;
                 height: 37px;
                 background-color: white;
                 border-radius: 50%;
                 box-shadow: 0.6px 0.6px 8px 0.2px rgba(120,120,120,0.4);
                 transition: all 0.04s ease-in;
              }

            </style>
        
           <div class="owl-switch">
                 <div class="switch-bg" id="switchbg">
                     <div id="owlcon" class="switch-contrl" on-click="toggle"></div>
                 </div>
        
            </div>
               
        `;
    }


}

customElements.define("owl-switch",owlSwitch);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlVirtualHover3D extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();

        if(this.position=="right"){

            this.$._hoverBox.className="hoverBox_p";

        }
        let domlist=this.shadowRoot.querySelector("#_slot").assignedNodes({flatten:false});
        let target=domlist[1];
        let parentnode=this.shadowRoot.querySelector("#_pnode");
        parentnode.removeChild(this.shadowRoot.querySelector("#_slot"));

        for(let i=0;i<=3;i++){
            let node=target.cloneNode(true);
            parentnode.appendChild(node);
        }
    }


    connectedCallback(){

        super.connectedCallback();
    }
    disconnectedCallback(){
        super.disconnectedCallback();

    }
    static get properties() { return {

        position:{

            type:String,
            value:"left"

        }
    }};


    static get template() {
        return html`
    
          <style>
              .hoverBox{
              
                 width: 280px;
                 height: 500px;
                 background-color: rgba(0,0,0,0.1);
                 position: relative;
                 transform: rotate(-30deg) skew(25deg) scale(0.8);
                 transition: all 0.5s;    
              
              }
             #_slot::slotted(*){
             
                 width: 100%;
                 position: absolute;
                 height: 100%;
                 transition: all 0.5s;
                 border-radius: 2px;
             }
             
             .hoverBox:hover #_pnode *:nth-child(4){
             
               transform: translate(160px,-160px);
               opacity: 1;
             }  
             
             .hoverBox:hover #_pnode *:nth-child(3){
             
               transform: translate(120px,-120px);
               opacity: 0.8;
             }  
             
             .hoverBox:hover #_pnode *:nth-child(2){
             
               transform: translate(80px,-80px);
               opacity: 0.6;
             }  
             
               .hoverBox:hover #_pnode *:nth-child(1){
             
               transform: translate(40px,-40px);
                opacity: 0.4;
             }  
             
             
                .hoverBox_p{
              
                 width: 280px;
                 height: 500px;
                 background-color: rgba(0,0,0,0.2);
                 position: relative;
                 transform: rotate(30deg) skew(-25deg) scale(0.8);
                 transition: all 0.5s;    
              
              }
             
             
             .hoverBox_p:hover #_pnode *:nth-child(4){
             
               transform: translate(-160px,-160px);
               opacity: 1;
             }  
             
             .hoverBox_p:hover #_pnode *:nth-child(3){
             
               transform: translate(-120px,-120px);
               opacity: 0.8;
             }  
             
             .hoverBox_p:hover #_pnode *:nth-child(2){
             
               transform: translate(-80px,-80px);
               opacity: 0.6;
             }  
             
               .hoverBox_p:hover #_pnode *:nth-child(1){
             
               transform: translate(-40px,-40px);
                opacity: 0.4;
             }  
             
             
             #_pnode{
             
                width: 100%;
                height: 100%;   
         
             }
             
             #_pnode *{
                 width: 100%;
                 position: absolute;
                 height: 100%;
                 transition: all 0.5s;
                 border-radius: 2px;
             
             }
            
          </style>
   
           <div class="hoverBox" id="_hoverBox">
           <div id="_pnode">
             <slot id="_slot"></slot>
           </div>
           </div>
        `;
    }

}

customElements.define("owl-virtual-hover3d",OwlVirtualHover3D);


import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlWave extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
              .owl-wave{
                
                  width: 100%;
                  height: 100%;
                  /*background-color: yellow;*/
                  position: relative;
                  align-items: center;
                  /*min-height: 100vh;*/
                  background-color: rgb(118, 218, 255);
                  /*border: 1px solid red;*/
                  overflow: hidden;
          
              }
              .owl-wave::before,owl-meteor::after{
              
                    content: "";
                    position: absolute;
                    left: 50%;
                    min-width: 200vw;
                    min-height: 200vw;
                    background-color: #fff;
                    animation-name: rotate;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
              }
              
           .owl-wave::before {
                bottom: 15vh;
                border-radius: 45%;
                animation-duration: 10s;
           }
         
            .owl-wave::after {
                bottom: 12vh;
                opacity: .5;
                border-radius: 47%;
                animation-duration: 10s;
            }

         
        @keyframes rotate {
            0% {
                transform: translate(-50%, 0) rotateZ(0deg);
            }
            50% {
                transform: translate(-50%, -2%) rotateZ(180deg);
            }
            100% {
                transform: translate(-50%, 0%) rotateZ(360deg);
            }
        }
                     
            </style>
        
          <div class="owl-wave">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-wave",OwlWave);

import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlFrostedGlass extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }

    ready(){

        super.ready();
        this.$.imgbg.src=this.bgsrc;
        this.$.imgbg.style.filter='blur('+this.blur+'px)';
        this.$.imgbg.style.opacity=this.opac;
    }
    static get properties() {

        return {
            mood: {

                type: String,
                value: "",
                observer:"_moodChange"
            },

            bgsrc: {

                type:String,
                value:""
            },
            blur:{

                type:String,
                value:"30px"
            },
            opac:{

                type:String,
                value:"0.8"

            }

        }};



    static get template() {
        return html`
             <style>
             
             .owl-frosted-glass{
             
                width: 100%;
                height: 100%;
                position: absolute;
             }
             
              .owl-frosted-glass img{
              
                width: 100%;
                height: 100%;
                filter: blur(10px);
                -webkit-filter: blur(10px);
                opacity: 0.8;
         
              }
     
            </style>
        
          <div class="owl-frosted-glass" id="airbox">
              <img src="../" id="imgbg">
          </div>
                    
        
        `;
    }

}

customElements.define("owl-frosted-glass",OwlFrostedGlass);
